<template>
  <el-card class="user-activity-timeline" shadow="never">
    <template #header>
      <div class="card-header">
        <span>最近活动</span>
        <el-button link size="small" @click="handleRefresh">
          <IconifyIconOffline icon="ep:refresh" />
          刷新
        </el-button>
      </div>
    </template>

    <div class="activity-timeline">
      <div v-if="!activities?.length" class="empty-state">
        <el-empty description="暂无活动记录" :image-size="80" />
      </div>

      <el-timeline v-else>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="formatTime(activity.activityTime)"
          placement="top"
          :type="getTimelineType(activity.result)"
          :icon="getActivityIcon(activity.activityType)"
          :color="getTimelineColor(activity.result)"
        >
          <div class="activity-item">
            <div class="activity-header">
              <div class="activity-type">
                <el-tag
                  :type="getActivityTagType(activity.activityType)"
                  size="small"
                  effect="light"
                >
                  {{ getActivityTypeName(activity.activityType) }}
                </el-tag>
                <el-tag
                  :type="getActivityResultType(activity.result)"
                  size="small"
                >
                  {{ activity.result }}
                </el-tag>
              </div>
            </div>

            <div class="activity-description">
              {{ activity.activityDescription }}
            </div>

            <div class="activity-details">
              <div v-if="activity.ipAddress" class="detail-item">
                <IconifyIconOffline icon="ep:location" />
                <span>{{ formatIpAddress(activity.ipAddress) }}</span>
              </div>
              <div v-if="activity.userAgent" class="detail-item">
                <IconifyIconOffline icon="ep:monitor" />
                <span>{{ formatUserAgent(activity.userAgent) }}</span>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>

      <!-- 操作按钮 -->
      <div v-if="activities?.length" class="action-buttons">
        <el-button
          v-if="activities.length >= 10"
          link
          size="small"
          @click="handleLoadMore"
        >
          查看更多
        </el-button>
        <el-button type="primary" size="small" @click="handleViewAll">
          查看全部记录
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { IconifyIconOffline } from "@/components/ReIcon";
import {
  formatTime,
  formatIpAddress,
  getActivityIcon,
  getActivityResultType,
  type UserActivity
} from "@/api/admin-user-profile";

interface Props {
  activities?: UserActivity[] | null;
}

interface Emits {
  (e: "refresh"): void;
  (e: "load-more"): void;
  (e: "view-all"): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const handleRefresh = () => {
  emit("refresh");
};

const handleLoadMore = () => {
  emit("load-more");
};

const handleViewAll = () => {
  emit("view-all");
};

const getTimelineType = (result: string) => {
  const typeMap: Record<string, any> = {
    SUCCESS: "success",
    FAILED: "danger",
    WARNING: "warning"
  };
  return typeMap[result] || "info";
};

const getTimelineColor = (result: string): string => {
  const colorMap: Record<string, string> = {
    SUCCESS: "#67c23a",
    FAILED: "#f56c6c",
    WARNING: "#e6a23c"
  };
  return colorMap[result] || "#409eff";
};

const getActivityTypeName = (activityType: string): string => {
  const nameMap: Record<string, string> = {
    LOGIN: "登录",
    LOGOUT: "登出",
    PUBLISH: "发布",
    COMMENT: "评论",
    LIKE: "点赞",
    FOLLOW: "关注",
    UNFOLLOW: "取消关注",
    VIEW: "浏览",
    COLLECT: "收藏",
    SHARE: "分享"
  };
  return nameMap[activityType] || activityType;
};

const getActivityTagType = (activityType: string) => {
  const typeMap: Record<string, any> = {
    LOGIN: "success",
    LOGOUT: "info",
    PUBLISH: "primary",
    COMMENT: "warning",
    LIKE: "danger",
    FOLLOW: "success",
    UNFOLLOW: "info"
  };
  return typeMap[activityType] || "info";
};

const formatUserAgent = (userAgent: string): string => {
  if (!userAgent) return "未知设备";

  // 简单的 User Agent 解析
  if (userAgent.includes("Chrome")) {
    return "Chrome 浏览器";
  } else if (userAgent.includes("Firefox")) {
    return "Firefox 浏览器";
  } else if (userAgent.includes("Safari")) {
    return "Safari 浏览器";
  } else if (userAgent.includes("Edge")) {
    return "Edge 浏览器";
  } else if (userAgent.includes("Mobile")) {
    return "移动设备";
  } else {
    return "其他设备";
  }
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-activity-timeline {
    .activity-timeline {
      .activity-item {
        padding: 8px;

        .activity-header {
          flex-direction: column;
          gap: 6px;
          align-items: flex-start;
        }

        .activity-details {
          flex-direction: column;
          gap: 6px;

          .detail-item {
            span {
              max-width: 200px;
            }
          }
        }
      }
    }
  }
}

.user-activity-timeline {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .activity-timeline {
    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }

    :deep(.el-timeline) {
      padding-left: 0;

      .el-timeline-item {
        padding-bottom: 20px;

        .el-timeline-item__timestamp {
          font-size: 12px;
          line-height: 1;
          color: #909399;
        }

        .el-timeline-item__wrapper {
          position: relative;
          top: -3px;
          padding-left: 28px;
        }

        .el-timeline-item__icon {
          width: 16px;
          height: 16px;
          font-size: 12px;
        }
      }
    }

    .activity-item {
      padding: 12px;
      margin-top: 4px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 8px;

      .activity-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;

        .activity-type {
          display: flex;
          gap: 6px;
        }
      }

      .activity-description {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
        color: #374151;
      }

      .activity-details {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        .detail-item {
          display: flex;
          gap: 4px;
          align-items: center;
          font-size: 12px;
          color: #6b7280;

          .iconify {
            font-size: 14px;
          }

          span {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
      padding-top: 16px;
      margin-top: 16px;
      border-top: 1px solid #e5e7eb;
    }
  }
}
</style>
